

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>订单管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="/layuiadmin/layui/css/layui.css"
	media="all">
<link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
<style>
.newform {
	margin-bottom: 15px;
}
</style>
</head>

<body>
	<div class="layui-fluid">
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form newform">
					<div class="layui-input-items">
						<div class="layui-input-inline">
							<input type="text" name="oid" placeholder="请输入订单ID"
								class="layui-input">
						</div>
						<!-- 订单的状态：1（待付款）2（待发货）3（待收货）4（待评价）5（已完成）6（已取消） -->
						<div class="layui-input-inline">
							<select class="layui-input" name="state">
								<option value="">请选择一个状态</option>
								<option value="1">待付款</option>
								<option value="2">待发货</option>
								<option value="3">待收货</option>
								<option value="4">待评价</option>
								<option value="5">已完成</option>
								<option value="6">已取消</option>
							</select>
						</div>
						<div class="layui-input-inline">
							<button class="layui-btn layuiadmin-btn-comm" lay-submit
								lay-filter="LAY-app-contcomm-search">
								<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
							</button>
						</div>
					</div>
				</form>
				<table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
				<script type="text/html" id="操作列模板">
          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit" data-type="edit"><i class="layui-icon layui-icon-edit"></i>详情详情</a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
        </script>
			</div>
		</div>
	</div>

	<script src="/layuiadmin/layui/layui.js"></script>
	<script type="text/html" id="newOnSale">
  		<input type="checkbox" name="state" value="{{d.pid}}" {{d.onSale?"checked":""}} lay-skin="switch" lay-text="上架|下架"  lay-filter="onSale" >
	</script>
	<script>
		layui.use([ 'table'], function() {
			var table = layui.table, form = layui.form;
			var $ = layui.$;
			// 渲染表格数据
			table.render({
				elem : '#LAY-app-content-list',
				toolbar : 'default',
				url : '/order/list',
				page : true,
				checkbox : true,
				cols : [ [ {
					checkbox : true
				}, {
					field : 'oid',
					title : '订单编号'
				}, {
					field : 'uid',
					title : '下单用户'
				}, {
					field : 'totalAmount',
					title : '总金额'
				}, {
					field : 'createTime',
					title : '下单时间'
				}, {
					<!-- 订单的状态：1（待付款）2（待发货）3（待收货）4（待评价）5（已完成）6（已取消） -->
					field : 'state',
					title : '订单状态',
					templet:function(d){
						if(d.state==1)return d.title="待付款"
						if(d.state==2)return d.title="待发货"
						if(d.state==3)return d.title="待收货"
						if(d.state==4)return d.title="待评价"
						if(d.state==5)return d.title="已完成"
						if(d.state==6)return d.title="已取消"
					}
				},{
					field : 'oid',
					title : '操作',
					toolbar : '#操作列模板',
					width : 200,
				} ] ]
			});

			// 处理搜索
			form.on('submit(LAY-app-contcomm-search)', function(data) {
				var field = data.field;
				if (field.oid.trim() == '' && field.state.trim() == '') {
					table.reload('LAY-app-content-list', {
						where : field,
						page : 1
					});
					layer.msg('请至少填写一个条件');
					return false;
				}
				
				//执行重载
				table.reload('LAY-app-content-list', {
					where : field,
					page : 1
				});

				return false;
			});
			
			form.on('switch(state)', function(obj){
				var oid = this.value;
				var state = obj.elem.checked;
				$.ajax({
					url:"/product/updata",
					type:"post",
					data:{
						oid:pid,
						state:state
					},
					dataType:'json',
					success: function(result){
						layer.msg('操作成功');
					}
				});
			  });
			
			table.on('tool(LAY-app-content-list)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
				if (layEvent == 'del') { //删除
					layer.confirm('真的删除行么', function(index) {

						//向服务端发送删除指令
						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						layer.close(index);
						layui.$.ajax({
							url : "/product/del",
							type : "get",
							data : {
								oid : data.pid
							},
							dataType : "json",
							success : function(res) {
								if (res.code == 0) {
									layer.msg('删除成功')
									table.reload('LAY-app-content-list')
								}
							}
						})
					});
				} else if (layEvent == 'edit') { //编辑
					//do something

					layer.open({
						type : 2,
						title : '更改商品信息',
						content : '/product/edit?pid=' + data.pid,
						maxmin : true,
						area : [ '550px', '550px' ],
						end : function() {

							table.reload('LAY-app-content-list')
						}
					});
				}
			});
			table.on('toolbar(LAY-app-content-list)', function(obj){
				  var checkStatus = table.checkStatus(obj.config.id);
				  var pids = checkStatus.data;
				  
				  switch(obj.event){
				    case 'add':
				    	add();
				    break;
				    case 'delete':
				    	batchDel(pids);
				    break;
				    case 'update':
				      layer.msg('编辑');
				    break;
				  };
				});
			
			function add() {
				
				layer.open({
					type : 2,
					title : '添加商品',
					content : '/product/add',
					maxmin : true,
					area : [ '550px', '550px' ],
					end : function() {
						console.log('已重载')
						table.reload('LAY-app-content-list')
					}
				});
			}
			function batchDel(pids){
				layer.confirm('确定删除吗？', function(){

					 layui.$.ajax({
						 url:"/batch/del",
						 type:"post",
						 dataType:"json",
						 data:{
							 pid:pids.map(c => c.pid)
								 },
						 success:function(){
							 table.reload('LAY-app-content-list');
							 layer.msg('已删除');
						 }
					 })
				});
			}

			$('.layui-btn.layuiadmin-btn-list').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

		});
	</script>

	<script type="text/html" id="imgtmp">
		<img src="{{d.cover}}">
	</script>
	<style type="text/css">
.layui-table-cell {
	height: auto !important;
}
</style>
</body>
</html>
